<template>
  <div class="lesson-detail-score">
    <div class="score-content">
      <p class="desc">
        <el-button v-if="score.price === 0 && flag === false" class="buy-button" @click="buyCourse(score)">立即学习</el-button>
        <el-button v-if="score.price !== 0 && flag === false" class="buy-button" @click="buyCourse(score)">购买课程</el-button>

        <el-button v-if="studyRecord && flag === true" class="buy-button" @click="continueStudy(studyRecord)">继续学习</el-button>
        <el-button v-if="studyRecord == null && flag === true" class="buy-button" @click="continueStudy(studyRecord)">开始学习</el-button>

        <span v-if="studyRecord && flag === true" class="study-span">{{`学习记录：`+studyRecord.periodName}}</span>
        <span v-if="studyRecord === null && flag === true" class="study-span">{{`还未开始学习`}}</span>

        <img :src="score.cover" style="max-width: 100%">

      </p>
      <div class="bottom">
        <dl>
          <dt>难度</dt>
          <dd v-if="score.level === 0">{{ `入门` }}</dd>
          <dd v-if="score.level === 1">{{ `初级` }}</dd>
          <dd v-if="score.level === 2">{{ `中级` }}</dd>
          <dd v-if="score.level === 3">{{ `高级` }}</dd>
        </dl>
        <dl>
          <dt>课时数</dt>
          <dd>{{ score.lessonSum }}</dd>
        </dl>
        <dl>
          <dt>人数</dt>
          <dd>{{ score.buySum }}</dd>
        </dl>
        <dl>
          <dt>价格</dt>
          <dd>{{ score.price + '.00' }}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { isBuyCourse,saveFreeOrder } from '@/api/order';
import { getStudy } from '@/api/study';
import { getPeriod } from '@/api/course';
import {getCourseDetailById} from '@/api/courseDetail';

export default {
  data () {
    return {
      userCourse:{
        userId: '',
        courseId: ''
      },
      // 是否购买
      flag: false,
      // 学习记录
      studyRecord:'',
      // 免费订单
      order: {},
    }
  },
  props: {
    score: {
      type: Object
    }
  },
  methods:{
    buyCourse(score){
      if (this.userId === ''){
        this.$message.error("请先登录系统！")
        return;
      }
      //判断课程是否免费
      //免费
      if (score.price === 0){
        // 获取课程数据
        getCourseDetailById(score.courseId).then(result => {
          let {code, data} = result
          if (code === 20000) {
            this.order.teacherId = data.item.teacherId
            this.order.userId = this.userId
            this.order.nickName = this.name
            this.order.mobile = this.mobile
            this.order.courseId = data.item.courseId
            this.order.courseName = data.item.name
            this.order.payable = data.item.price
            this.order.paid = data.item.price

            saveFreeOrder(this.$qs.stringify(this.order)).then(result => {
              if (result.code === 20000){
                this.$message.success("购买成功！可以点击课程列表进行学习！")
                setTimeout(() => {window.location.reload()},500)
              }
            })
          }
        })
      }

      //收费
      if (score.price !== 0){
        //新窗口打开
        let url = this.$router.resolve({
          path: '/confirm/'+score.courseId,
        });
        window.open(url.href, '_blank')
        // this.$router.push("/confirm/"+score.courseId)
      }
    },
    isBuy(){
      this.userCourse.userId = this.userId
      this.userCourse.courseId = this.score.courseId
      isBuyCourse(this.userCourse).then(result => {
        let { code, data } = result
        if (code === 20000) {
          //未购买
          if (data.item === 1){
            this.flag = true
          }
          else this.flag = false
        }
      })
    },
    // 获取学习记录
    getStudyRecord(){
      this.userCourse.userId = this.userId
      this.userCourse.courseId = this.score.courseId
      getStudy(this.userCourse).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.studyRecord = data.item
        }
        else {
          this.studyRecord = null
        }
      })
    },
    continueStudy(studyRecord){
      getPeriod(studyRecord.periodId).then(result => {
        let {code,data} = result
        if (code === 20000){
          let period = data.item
          //如果为文档，则跳转下载
          if (period.doc === 1){
            window.location.href = period.docUrl
          }
          //如果为文档，则跳转至播放
          if (period.video === 1){
            let url = this.$router.resolve({
              path: '/player',
              query: {videoId: period.videoId}
            });
            window.open(url.href, '_blank')
          }
        }
      })
    }
  },
  created () {
    if (this.userId === ''){
      return;
    }
    else {
      this.isBuy()
      this.getStudyRecord()
    }
  },
  computed: {
    ...mapGetters({
      'userId': 'id',
      'name': 'name',
      'mobile': 'mobile'
    })
  },
}
</script>
<style lang="stylus" scoped>
  .lesson-detail-score
    .title
      margin-bottom: 8px;
      font-size: 16px;
      color: #07111b;
      line-height: 24px;
    .score-content
      padding: 24px 4px;
      background-color: #eff2f5;
      border-radius: 8px;
      box-sizing: border-box;
      text-align: center;
      .rate-name
        margin-bottom: 8px;
        font-size: 16px;
        color: #07111b;
        line-height: 24px;
        font-weight: 700;
      .rate
        margin-bottom: 8px;
        color: #fa0;
        font-size: 32px;
        font-weight: 700;
        line-height: 32px;
      .comment-btn
        margin: 0 auto 8px;
        width: 160px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 36px;
        border: 1px solid #f90;
        background-color: #eff2f5;
        font-size: 14px;
        color: #f90;
        cursor: pointer;
        &:hover
          background-color: #f90;
          color: #fff;
      .desc
        margin: 0 auto 16px;
        padding-bottom: 16px;
        width: 90%;
        border-bottom: 1px solid #d9dde1;
        font-size: 12px;
        line-height: 20px;
        color: #93999f;
      .bottom
        display: flex;
        align-items: center;
        dl
          flex: 1;
          font-size: 12px;
          dt
            margin-bottom: 2px;
            color: #07111b;
            line-height: 16px;
          dd
            color: #4d555d;
            line-height: 16px;
  .buy-button
    background-color: #f01414;
    line-height: 24px;
    color: #fff;
    margin-bottom 10px;
    width 100%
    font-size 16px;
  .study-span{
    font-weight 600;
    font-size 14px;
    color #07111b;
    width auto
  }
</style>
